<template>
  <div>
    <ProTable v-loading="loading" :data="tableData" :page="page" :column="column" :rowControl="[]"
      :elProps="{ border: true }" :disabled="[]" :controlWidth="{}" @page-change="onPageChange" @pageRefresh="pageRefresh">
      <template #search_operate>
        <el-table-column fixed="right" min-width="50px">
          <template #default="scope">
            <div class="flex justify-around">
              <div><el-link class="flex justify-center" type="primary" :underline="false"
                  @click="handleSelect(scope.row, scope.$index,)">延長</el-link></div>
              <div><el-link class="flex justify-center" type="primary" :underline="false"
                  @click="handleRegister(scope.row, scope.$index,)">套票報名</el-link></div>
            </div>
          </template>
        </el-table-column>
      </template>
    </ProTable>
    <delayed ref="delayedRef" @update="update"></delayed>
    <PackageUsage ref="PackageUsageRef" @update="update"></PackageUsage>
  </div>
</template>

<script setup>
import { ref, reactive, watch } from 'vue'
import { getTickets } from '@/http/index.js'
import delayed from './delayed.vue'
import PackageUsage from './PackageUsage.vue'
import { dayjs } from "element-plus";
import { message } from '@/common/function.js'
const column = {
  name: '套票名字',
  number: '發票編號',
  num: '數量',
  useNum: '已報名',
  create_time: '創建時間',
  hereto: '到期時間'
}
const props = defineProps({
  echo: Object,
  tableDataTP: Object
})
const page = reactive({ page: 1, limit: 10, total: 0, page_size: [10, 20, 30] })
const loading = ref(false)
const tableData = ref([])
const form = reactive({
  student_id: ''
})
watch(() => props.echo, (newval) => {
  form.student_id = newval.id
}, { deep: true, immediate: true })

watch(() => props.tableDataTP, (newval) => {
  tableData.value = newval
  console.log(tableData.value);
})

const init = async () => {
  loading.value = true
  let obj = Object.assign(form, page)
  const data = await getTickets(obj)
  if (data.code == 200) {
    try {
      loading.value = false
    page.total = data.data.total
    tableData.value = data.data.data
    } catch (error) {
      console.log(error,'errorerrorerror');
      
    }

    //  tableData.value =  data.data.map(({details, number}) => details.map(item => ({number, ...item}))).flat()
  }
}
const delayedRef = ref('')
const PackageUsageRef = ref('')
const handleSelect = (e) => {
  delayedRef.value.init(e)
}
const notusedNumber = ref(0)
const ticketList = ref({})
const handleRegister = (e) => {
  let determine = dayjs(dayjs(`${new Date()}`).format('YYYY-MM-DD hh:mm:ss')).isBefore(dayjs(e.hereto))
  if (determine) {
    e.course.map(v => {
      v.invoice_id = e.id
      v.course_id = v.id
    })
    ticketList.value = e
    notusedNumber.value = e.num - e.useNum
    PackageUsageRef.value.init(ticketList.value, notusedNumber.value, form.student_id)
  } else {
    message('當前所使用套票已過期', 'warning')
  }
}

const onPageChange = async ({ e, type }) => {
  console.log(e, type);
  if (type == "current") {
    page.page = e;
  }
  if (type == "size") {
    page.page = 1
    page.limit = e;
  }
  await init();
}
const pageRefresh = async () => {
  loading.value = true
  page.page = 1
  await init();
}
const update = () => {
  init();
}
defineExpose({
  init, page
})

</script>

<style scoped lang='less'></style>